<template>
	<view>
		<view class="banner" id="banner">
			<image src="https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221210/a1747221a8fd4c4cb4f74e5fa43bce52.jpg" mode="widthFix" class="b-cover"></image>
		</view>
		<view class="type">
			<v-tabs v-model="typeIndex" :pills="true" activeColor="#fff" color="#fff" :bold="false" height="98rpx" lineHeight="98rpx" bgColor="#ccc" pillsColor="#00A5FF" pillsBorderRadius="0" paddingItem="0 24rpx" field="typeName" :lineAnimation="false" :tabs="typeArray" @change="typeChange" :style="tabsFixed ? 'position: fixed;top: 0;right: 0;left: 0;z-index: 20;' : ''"></v-tabs>
		</view>
		<view class="list">
			<navigator v-for="item,index in listArray" :key="index" class="l-row" :url="item.url" hover-class="none">
				<image :src="item.images" mode="aspectFill" class="lr-cover"></image>
				<view class="lr-item">
					<view class="lri-title">{{item.title}}</view>
					<view class="lri-desc">{{item.subtitle}}</view>
					<view class="lri-label aclear" v-if="item.caseTypeName">
						<navigator class="lril-a" :url="item.caseTypeUrl" hover-class="none">网站建设{{item.caseTypeName}}</navigator>
					</view>
					<view class="lri-tool">
						<view class="lrit-views">
							<image src="@/static/images/icon-eye.png" class="icon-eye"></image>{{item.views||0}}
						</view>
						<view class="lrit-date">{{item.addTimeNow}}</view>
					</view>
				</view>
			</navigator>
			<view class="l-null" v-if="listArray.length<1">
				<image src="https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221115/1d9127c255e443339c89aa67c36acc2a.png" class="ln-icon"></image>
				<view class="ln-text">暂无数据</view>
			</view>
		</view>
		<Footers></Footers>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabsHeight: 0,
				tabsFixed: false,
				typeIndex: 0,
				typeArray: [],
				formData: {
					pageNum: 1,
					pageSize: 20,
					newsTypeAliases: ''
				},
				listArray: [],
				pageCount: 0
			}
		},
		onLoad(option) {
			this.formData.newsTypeAliases = option.type || ''
			this.getTypeFn()
			this.getListFn()
			uni.createSelectorQuery().in(this).select('#banner').boundingClientRect(data => {
				this.tabsHeight = data.height
			}).exec()
		},
		onShow() {
			// 设置TDK
			if (uni.getSystemInfoSync().uniPlatform == 'mp-baidu') {
				swan.setPageInfo({
					title: '新闻资讯-提供实时网站建设、seo优化新闻-纺扬科技',
					description: '纺扬网站建设专业网站建设，网站设计，网站建设公司，网站制作，网页设计，先设计后付费，已为上千家服务，为深圳、广州、北京、上海和全国各地企业和个人服务，联系电话：（☏:191-0267-1826）',
					keywords: '新闻资讯,纺扬网站建设'
				})
			}
		},
		onPullDownRefresh() {
			this.listArray = []
			this.formData.pageNum = 1
			this.getListFn()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.formData.pageNum >= this.pageCount) {
				uni.showModal({
					title: '温馨提示',
					content: '已经到底了还没有你喜欢的么？要不看看客户案例吧！',
					success(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/khal'
							})
						}
					}
				})
				return false
			}
			this.formData.pageNum ++
			this.getListFn()
		},
		onPageScroll(e) {
			if (!this.tabsFixed && e.scrollTop >= this.tabsHeight) {
				this.tabsFixed = true
			}
			if (this.tabsFixed && e.scrollTop <= this.tabsHeight) {
				this.tabsFixed = false
			}
		},
		methods: {
			// 获取新闻类型
			async getTypeFn() {
				let getType = await this.u.http({
					url: this.u.queryNewsTypeList,
					data: {
						pageNum: 1,
						pageSize: 50
					}
				})
				if (getType.code == 200) {
					this.typeArray = getType.data.list
					this.typeArray.forEach((item, index) => {
						if (item.typeAliases == this.formData.newsTypeAliases) {
							this.typeIndex = index
							// 设置TDK
							if (uni.getSystemInfoSync().uniPlatform == 'mp-baidu') {
								swan.setPageInfo({
									title: item.seoTitle.replace(/{分页}/gi, ''),
									description: item.seoDesc,
									keywords: item.seoKeyword
								})
							}
						}
					})
				}
			},
			// 选择新闻类型
			typeChange(index) {
				uni.redirectTo({
					url: `/pages/xwzx?type=${this.typeArray[index].typeAliases}`
				})
			},
			// 获取新闻列表
			async getListFn() {
				let getList = await this.u.http({
					url: this.u.queryNewsList,
					data: this.formData
				})
				if (getList.code == 200) {
					getList.data.list.forEach(item => {
						item.addTimeNow = this.u.formatTime(item.addTime, 'Y-m-d')
						item.url = `/pages/xwzxxq?id=${item.id}`
						item.caseTypeUrl = `/pages/khal?type=${item.caseTypeAliases}`
					})
					this.listArray = [...this.listArray, ...getList.data.list]
					this.pageCount = getList.data.pages
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	@import url("@/static/css/color.less");
	
	.type {
		height: 98rpx;
	}
	
	.list {
		padding: 40rpx 24rpx 0;
		
		.l-row {
			margin-bottom: 40rpx;
			display: flex;
			align-items: stretch;
			
			.lr-cover {
				width: 281rpx;
				height: 204rpx;
				margin-right: 20rpx;
			}
			
			.lr-item {
				flex: 1 0;
				overflow: hidden;
				display: grid;
				align-content: space-between;
				
				.lri-title {
					font-size: 32rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				
				.lri-desc {
					font-size: 28rpx;
					margin-top: 10rpx;
					color: #666;
					overflow: hidden;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				
				.lri-label {
					margin-top: 10rpx;
					
					.lril-a {
						float: left;
						color: @color-orange;
						padding: 0 20rpx;
						height: 40rpx;
						line-height: 40rpx;
						border-radius: 4rpx;
						border: 1rpx solid @color-orange;
						box-sizing: border-box;
						font-size: 24rpx;
					}
				}
				
				.lri-tool {
					margin-top: 10rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					.lrit-views {
						display: flex;
						align-items: center;
						font-size: 24rpx;
						color: #999;
						
						.icon-eye {
							width: 22rpx;
							height: 18rpx;
							margin-right: 10rpx;
						}
					}
					
					.lrit-date {
						font-size: 24rpx;
						color: #999;
					}
				}
			}
		}
		
		.l-null {
			overflow: hidden;
			
			.ln-icon {
				width: 200rpx;
				height: 165rpx;
				margin: 50rpx auto 0;
				display: block;
			}
			
			.ln-text {
				margin-top: 20rpx;
				text-align: center;
				font-size: 24rpx;
				color: #999;
			}
		}
	}
</style>
